<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>处理文字溢出</title>
    <style>
      /* margin塌陷问题   第一个子元素的上margin和最后一个元素的下margin会作用于其父元素上 
      解决办法：在父元素上设置border或者padding
    */
      .outter {
        background-color: gray;
        width: 400px;
        height: 400px;
        /* 文字溢出处理使用 overflow属性*/
        overflow: auto;
        overflow-y: visible;

      }
      #d1 {
        background-color: orange;
        width: 500px;
      }

    </style>
  </head>
  <body>
    <div class="outter">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ullam
      tempora ex tenetur illo, modi animi eligendi, repellat molestias nobis
      quae debitis sed laborum inventore soluta minus dolore, cupiditate nam
      corrupti eum error non harum distinctio facilis. Sed excepturi laborum
      architecto vitae accusamus ullam error inventore laudantium debitis
      libero, molestiae aut ea nulla, qui explicabo suscipit repellat hic
      voluptas numquam aliquam alias cum accusantium! Fugiat modi nostrum autem
      eveniet optio.
      <div id="d1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
        perspiciatis magni eum libero iure temporibus impedit nulla
        reprehenderit molestiae vitae, provident quas ratione dicta corporis
        voluptas nisi quod nesciunt neque autem quo soluta ad assumenda
        necessitatibus ex. Fugiat repellat quae itaque. Labore esse odit sed
        voluptates delectus, ipsam ipsum quod?
      </div>
      Unde ipsa doloribus sapiente, distinctio odio laboriosam provident sequi
      temporibus officiis totam voluptatibus, voluptate, incidunt fugit! Iste ab
      error impedit fugit, necessitatibus blanditiis possimus, molestias,
      eveniet praesentium laboriosam sunt! Quos, assumenda ad ipsum facilis
      numquam mollitia debitis. Sapiente facere iusto nemo nesciunt! Perferendis
      maiores sed reiciendis pariatur, consequatur culpa voluptatibus aut neque
      impedit officia aspernatur fugit placeat nobis illum asperiores
      dignissimos? Suscipit adipisci labore facere esse in nobis alias, laborum
      impedit omnis numquam dignissimos error rem magnam possimus, vitae
      mollitia dicta, commodi illum quibusdam? Voluptate repudiandae reiciendis
      tenetur possimus laborum recusandae porro aliquam consequatur voluptas,
      sint cupiditate minus dolor ut velit deleniti error in incidunt, amet quam
      et consectetur dolore. Ut cumque pariatur dolores architecto enim cum
      consequuntur! Odit ab id alias. Deleniti ex temporibus laudantium, nostrum
      modi voluptatem possimus!
    </div>
  </body>
</html>
